<template>
  <div class="warehouseCenterIndex absolute inset-x-0 inset-y-0">
    <template v-for="(item, i) in cameraArr" :key="item.cameraIndexCode + i">
      <CameraOnMap v-if="!item.hasAlarm" :info="item"></CameraOnMap>
      <WarnOnMap v-else :info="item"></WarnOnMap>
    </template>
    <template v-if="warnInfo">
      <CameraOnMap v-if="!warnInfo.hasAlarm" :info="warnInfo"></CameraOnMap>
      <WarnOnMap v-else :info="warnInfo" :detail="true"></WarnOnMap>
    </template>
  </div>
</template>

<script setup>
import { inject } from 'vue'
import {cameraInfo} from '@/api/armyScreenApi.js'
import CameraOnMap from '@/views/armyScreen/warehouse/center/CameraOnMap.vue'
import WarnOnMap from '@/views/armyScreen/warehouse/center/WarnOnMap.vue'
// import { useWebSocket } from '@vueuse/core'
import $bus from "@/util/bus";
//
// const ipPort = import.meta.env.DEV ? '10.192.195.225' : window.location.host
// // const wsUrl = `${location.protocol === 'http:' ? 'ws://' : 'wss://'}${ipPort}/csjzzav/realtime/alarm`
// const wsUrl = `${location.protocol === 'http:' ? 'wss://' : 'wss://'}${ipPort}/csjzzav/realtime/alarm`
// console.log('wsUrl', wsUrl)
const warnInfo = inject('warnInfo')
// const warnInfo = ref(null)
// /**
//  * status 是连接的状态值
//  * data 是 socket 推送过来的消息
//  * send 是一个方法， 用来发送消息给后台
//  * close 是一个方法，关闭 socket 连接
//  * open 。。。不知道
//  */
// const { status, data, send, open, close  } = useWebSocket(wsUrl, {
//   onConnected: function (ws) {},
//   onDisconnected: function (ws, event) {},
//   onError: function (ws, event) {},
//   onMessage: function (ws, event) {
//     if (event.data) {
//       const info = JSON.parse(event.data)
//       console.log(info)
//       warnInfo.value = info
//     }
//   },
//   heartbeat: true,
//   autoReconnect: true,
//   autoClose: true,
// })

// import EventOnMap from '@/views/armyScreen/warehouse/center/EventOnMap.vue'
// [
//   {
//     "cameraIndexCode": "d90970f42f2e4393ba2de8a8dfaece6c",
//     "cameraName": "研发大会议室",
//     "x": "123",
//     "y": "32",
//     "hasAlarm": true,
//     "alarmRecord": [
//       {
//         "time": "2023-10-09 11:10:12",
//         "location": "1号油料库",
//         "alarmType": "震动光纤报警"
//       },
//       {
//         "time": "2023-10-09 12:10:12",
//         "location": "1号收发室",
//         "alarmType": "温度异常报警"
//       }
//     ]
//   },
//   {
//     "cameraIndexCode": "fcd253f41fdd4f799c099997373b574c",
//     "cameraName": "研发大门口",
//     "x": "122",
//     "y": "322",
//     "hasAlarm": false,
//     "alarmRecord": []
//   }
// ]

/************/
onMounted(()=> {
  cameraInfoService()
  $bus.on('reRequest', cameraInfoService)
})
onBeforeUnmount(() => {
  $bus.off('reRequest', cameraInfoService)
})
/************/
const cameraArr = ref([])

function cameraInfoService() {
  cameraInfo().then(res => {
    console.log(res)
    cameraArr.value = res.data || []
  })
}

</script>

<style lang="scss" scoped>
.warehouseCenterIndex {
  --bgUrl: url('@/assets/images/armyScreen/bg1.png');
  pointer-events: none;
  background-image: var(--bgUrl);
  background-size: cover;
}
</style>
